.horizontal-center {
      width: 100%;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
}

.vertical-center {
      height: 100%;
      display: flex;
      align-self: center;
      flex-wrap: wrap;
}

.center {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
}

.content-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 99;
      .flex-container {
            @extend .center;
            background-color: rgba(0, 0, 0, 0.8);
            .center-container {
                  width: 60%;
                  height: 80%;
                  overflow: hidden;
                  .topbar {
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        border-bottom: 0.1rem solid white;
                        padding-bottom: 1.2rem;
                        .content-title {
                              height: 2rem;
                              font-size: 2rem;
                              line-height: 2rem;
                              color: white;
                              font-weight: bold;
                        }
                        .close-page {
                              height: 2rem;
                              button {
                                    width: 2rem;
                                    height: 2rem;
                                    background-color: transparent;
                                    border: none;
                                    outline: none;
                                    cursor: pointer;
                                    background-size: cover;
                                    background-image: url('../img/delete.svg');
                              }
                        }
                  }
            }
      }
}
